<template>
  <ul class="shop-commodity-list" v-if="restaurantId">
    <scroll class="scroll" ref="scroll">
      <li
        v-for="(item, index) in shopCommodityList"
        :key="index"
        class="item"
        :class="{ active: currentIndex === index }"
        @click="handleCommodityListItemBtn(index)"
        v-if="succedaneum[index]"
      >
        {{ item.name }}
        <div class="item-count" v-if="succedaneum[index].count">
          {{ succedaneum[index].count }}
        </div>
      </li>
    </scroll>
  </ul>
</template>

<script>
import Scroll from "components/common/betterScroll/Scroll";

import { mapGetters } from "vuex";
export default {
  data() {
    return {
      currentIndex: 0,
      commodity: {},
      succedaneum: [],
    };
  },
  props: {
    restaurantId: {
      type: Number,
      default: 0,
    },
  },

  computed: {
    ...mapGetters(["shopCommodityList", "goods"]),
  },
  watch: {
    goods(value) {
      this.handleErgodic();
    },
    restaurantId() {
      this.handleErgodic();
    },
  },
  created() {
    for (const key in this.shopCommodityList) {
      this.succedaneum.push({
        id: this.shopCommodityList[key].id,
        count: 0,
      });
    }
  },
  mounted() {
    this.$bus.$on("scrollEvent", (index) => {
      this.currentIndex = index;
    });

    this.$bus.$on("handleGoodsCount", (restaurant_id, category_id) => {
      this.handleErgodic();
    });
  },
  methods: {
    handleCommodityListItemBtn(index) {
      this.currentIndex = index;
      this.$bus.$emit("handleCommodityListItemBtn", index);
    },
    handleErgodic() {
      for (const key in this.succedaneum) {
        const selectItem = [];
        for (const kez in this.goods[this.restaurantId]) {
          
          if (this.succedaneum[key].id === Number(kez)) {
            
            let count = 0;
            function ergodic(obj) {
              for (const key in obj) {
                obj[key].id ? selectItem.push(obj[key]) : ergodic(obj[key]);
              }
            }

            ergodic(this.goods[this.restaurantId][this.succedaneum[key].id]);
            count = selectItem.reduce((pre, val) => {
              return (pre += val.count);
            }, 0);
            this.succedaneum[key].count = count;
          }
        }
      }
    },
  },
  components: {
    Scroll,
  },
};
</script>
<style lang="less" scoped>
.shop-commodity-list {
  width: 90px;
  background-color: #f5f5f5;
  font-size: 12px;
  .scroll {
    height: 100%;
  }
  .item {
    position: relative;
    width: 90px;
    padding: 20px 10px;
    border-bottom: 1px solid #f0f0f0;
    word-break: break-all; //让字母根据宽度进行换行显示
    .item-count {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 15px;
      height: 15px;
      line-height: 12px;
      padding: 1px;
      text-align: center;
      border-radius: 50%;
      background-color: #ff461d;
      font-size: 10px;
      color: #fff;
    }
  }
  .active {
    background-color: #fff;
    border-left: 2px solid #3190e8;
  }
}
</style>